<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Css3 Collapse Animation</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            overflow: hidden;
            background: #1ab394;
            transition: all 1s;
        }
        .hide{
            height: 0;
        }
        .show {
            height: 300px;
        }
    </style>
</head>
<body>
<button onclick="clickFunc();">Switch</button>
<div class="box" id="div">
    14款CSS3卡片堆叠切换动画特效
    2015年11月2日 - 更多相关 CSS3图片切换动画效果卡片样式 脚本简介 14款CSS3卡片堆叠切换动画特效是一款非常有创意的堆叠卡片切换动画特效。这些堆叠卡片切换效果通过...
    sc.chinaz.com/jiaoben/... - 百度快照
    HTML5/CSS3折叠动画登录表单 | HTML5资源教程
    HTML5/CSS3折叠动画登录表单6,769 人浏览2条回复 之前我们分享过一款仿facebook的登录表单,效果的确很赞。今天我们再来分享一款很有特色的CSS3登录表单,这款登录...
</div>
<script>
    /* eslint-disable no-unused-vars */
    let show = true;

    function clickFunc () {
        let div = document.getElementById('div');
        show = !show;

        if (show === true) {
            div.className = 'box show';
        } else {
            div.className = 'box hide';
        }
        console.info(div.className);
    }
</script>
</body>
</html>
